<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px;
            padding:20px;
            border-left: 15px solid red;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="box">
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容 文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容 文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容 文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
    文字内容
</div>
</body>
</html>
<script>
    var div = document.getElementsByTagName("div")[0];
    console.log("offsetWidth:" + div.offsetHeight);  //  盒子自己的宽度
    console.log("clientWidth:" +div.clientHeight);
    console.log("scrollWidth:" +div.scrollHeight);
</script>